<template>
	<view class="y-h">
		<view class="l-i0" :class="['l-i'+index%4]" v-for="(item,index) in list" :key="index">
			<view class="l-t">
				<text class="title">{{item.bank_name}}</text>
				<text class="moren" :class="{active:item.is_default==1}" @click="setMoRen(index)">{{
					item.is_default==1?'默认银行卡':'设为默认'
				}}</text>
			</view>
			<view class="l-type">{{item.card_type==2?'信用卡 / 贷记卡':item.card_type==1?'借记卡 / 储蓄卡':''}}</view>
			<view class="l-n">
				<view class="l-left">
					<text class="ka-hao">{{item.iseye?item.ka1:'····'}}</text>
					<text class="ka-hao">{{item.iseye?item.ka2:'····'}}</text>
					<text class="ka-hao">{{item.iseye?item.ka3:'····'}}</text>
					<text class="ka-hao">{{item.ka4}}</text>
					<image class="yan-j"
						:src="item.iseye?'/pages/set/static/yinka/biyan.png':'/pages/set/static/yinka/yanjing.png'"
						 @click="setEye(index)">
					</image>
				</view>
				<view class="l-right" @click="$navTo(`./yinkainfo?type=2&id=${item.id}`)">
					<text>查看</text>
					<image class="more" src="/pages/set/static/yinka/sjiantou.png" ></image>
				</view>
			</view>

		</view>
		<view class="l-add" @click="$navTo('./yinkainfo?type=1')">
			<view class="jia">
				<image class="jia-i" src="/pages/set/static/yinka/jia.png" ></image>
			</view>
			<view class="t">添加银行卡</view>
			<view class="remarks">添加银行卡方便资产管理</view>
		</view>
	</view>
</template>

<script>
	import {
		debounce
	} from 'lodash'
	export default {
		data() {
			return {
				list: [],
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			init() {
				this.getList()
			},
			async getList() {
				uni.showLoading({
					title: '加载中'
				})
				const res = await this.$axios('BankCard/lst', 'POST', 'pt')
				uni.hideLoading()
				if (res.data.code == 200) {
					const list = res.data.data.list || []
					this.list = list.map(item => {
						return {
							...item,
							iseye: false,
							ka1: item.bank_card.slice(0, 4),
							ka2: item.bank_card.slice(4, 8),
							ka3: item.bank_card.slice(8, 12),
							ka4: item.bank_card.slice(12, 16),
						}
					})
				} else {
					uni.showModal({
						title: '温馨提示',
						content: res.data.data
					})
				}
			},
			// 设置默认银行卡
			async setMoRen(idx) {
				if (this.list[idx].is_default == 1) {
					return
				}
				const {
					cancel
				} = await uni.showModal({
					title: '温馨提示',
					content: '确定设置此卡为默认卡？'
				})
				if (cancel) {
					return
				}
				uni.showLoading({
					title: '设置中'
				})
				const res = await this.$axios('BankCard/def', 'POST', 'pt', {
					id: this.list[idx].id
				}, 1)
				uni.hideLoading()
				let content = ''
				if (res.data.code == 200) {
					const list = [...this.list]
					this.list = list.map(item => {
						if (item.id == list[idx].id) {
							item.is_default = '1'
						} else {
							item.is_default = '0'
						}
						return item
					})
					content = '设置成功'
				} else {
					content = res.data.data
				}
				uni.showModal({
					title: '温馨提示',
					content
				})
			},
			// 改变查看银行卡状态
			setEye: debounce(function(idx) {
				this.list[idx].iseye = !this.list[idx].iseye
			}, 200)
		}
	}
</script>

<style scoped lang="scss">
	.y-h {
		box-sizing: border-box;
		min-height: 100vh;
		background-color: #fdf8ff;
		font-family: Microsoft YaHei;
		font-variation-settings: "opsz" auto;
		padding-bottom: 120rpx;
		padding-top: 24rpx;

		.l-i0 {
			width: 694rpx;
			height: 198rpx;
			border-radius: 16rpx;
			background: #9137CA;
			margin: 0 auto;
			margin-bottom: 24rpx;
			padding: 32rpx 24rpx;

			.l-t {
				display: flex;
				justify-content: space-between;
				align-items: end;

				.title {
					font-size: 32rpx;
					font-weight: bold;
					letter-spacing: 0px;
					color: #FFFFFF;
				}

				.moren {
					font-size: 20rpx;
					font-weight: bold;
					color: #FFFFFF;
					text-align: center;
					border-radius: 8rpx;
					padding: 2rpx 16rpx 4rpx 16rpx;
					background: rgba(255, 255, 255, 0.15);
				}

				.active {
					background: #FFFFFF;
					color: #9137CA;
				}
			}

			.l-type {
				color: #FFFFFF;
				font-size: 24rpx;
				font-weight: 290;
			}

			.l-n {
				display: flex;

				.l-left {
					flex: 1;
					display: flex;
					align-items: center;
					padding-top: 20rpx;

					.ka-hao {
						color: #fff;
						letter-spacing: 6rpx;
						font-weight: bold;
						margin-right: 16rpx;
					}

					.yan-j {
						width: 48rpx;
						height: 48rpx;
					}
				}

				.l-right {
					font-weight: bold;
					line-height: 40rpx;
					color: #FFFFFF;
					display: flex;
					align-items: center;

					text {
						font-size: 28rpx;
					}

					.more {
						margin-left: 20rpx;
						width: 28rpx;
						height: 24rpx;
					}
				}
			}
		}

		.l-i1 {
			background: #E67B7B;
		}

		.l-i2 {
			background: #385294;
		}

		.l-i3 {
			background: #3F9A7D;
		}

		.l-add {
			width: 694rpx;
			height: 256rpx;
			border-radius: 16rpx;
			background: #FFFFFF;
			margin: 0 auto 24rpx;
			text-align: center;

			.jia {
				padding-top: 40rpx;

				.jia-i {
					width: 88rpx;
					height: 88rpx;
				}
			}

			.t {
				font-size: 32rpx;
				color: #13001E;
			}

			.remarks {
				color: #999999;
				padding-top: 14rpx;
				font-size: 24rpx;
			}
		}
	}
</style>